<template>
    <el-menu default-active="2" :unique-opened="uniqueOpened" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#495060" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse">
        <router-link :to="{path:'/'}">
            <el-menu-item index="1">
                <i class="fa-home fa"></i>
                <span slot="title">首页</span>
            </el-menu-item>
        </router-link>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span>内容管理</span>
            </template>
            <router-link :to="{path:'/Video/SingleVideo'}">
                <el-menu-item index="2-1">单视频课程</el-menu-item>
            </router-link>
            <router-link :to="{path:'/Video/MultiVideo'}">
                <el-menu-item index="2-2">多视频课程</el-menu-item>
            </router-link>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title">
                <i class="fa-bullhorn fa"></i>
                <span>广告管理</span>
            </template>
             <router-link :to="{path:'/Ad/AdIndex'}">
                <el-menu-item index="3-1">首页广告</el-menu-item>
             </router-link>
        </el-submenu>
        <el-submenu index="4">
            <template slot="title">
                <i class="fa-certificate fa"></i>
                <span>推荐内容管理</span>
            </template>
            <router-link :to="{path:'/Recommend/RecommendIndex'}">
                <el-menu-item index="4-1">首页推荐</el-menu-item>
            </router-link>
            <!-- <router-link :to="{path:'/Recommend/RecommendCollege'}">
                <el-menu-item index="4-2">学院页推荐</el-menu-item>
            </router-link> -->
        </el-submenu>
        <router-link :to="{path:'/SortManagement'}">
            <el-menu-item index="5">
                <i class="el-icon-setting"></i>
                <span slot="title">分类管理</span>
            </el-menu-item>
        </router-link>
        <router-link :to="{path:'/UserManagement/User'}">
            <el-menu-item index="6">
                <i class="fa-users fa"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
        </router-link>
        <router-link :to="{path:'/UserSuggestion/Reply'}">
            <el-menu-item index="7">
                <i class="fa-pencil-square-o fa"></i>
                <span slot="title">用户建议</span>
            </el-menu-item>
        </router-link>
        <router-link :to="{path:'/'}">
            <el-menu-item index="8">
                <i class="fa-comments fa"></i>
                <span slot="title">评论管理</span>
            </el-menu-item>
        </router-link>
         <router-link :to="{path:'/PushData/Push'}">
            <el-menu-item index="9">
                <i class="fa-cloud-upload fa"></i>
                <span slot="title">推送</span>
            </el-menu-item>
        </router-link>
    </el-menu>
</template>

<script>
export default {
    name:'navbar',
    data(){
      return {
        uniqueOpened:true,
        isCollapse: false,//导航栏收缩
      };
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style>
    .el-menu-item i[class^=fa-],.el-submenu i[class^=fa-]{
      vertical-align: middle;
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px
  }
</style>

